<html>
<head>
    {% block head %}
        <title>{% block title %}{% block page_title %}{% endblock %} - CatChat{% endblock %}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="icon" href="{{ url_for('static', filename='logo.png') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='semantic-ui/semantic.min.css') }}">
    {% endblock %}
</head>
<body>

<div class="ui labeled icon right vertical inverted demo menu sidebar">
    <a class="item" href="{{ url_for('chat.anonymous') }}">
        <i class="user secret icon"></i>
        Incognito Mode
    </a>
    <a class="item" href="http://helloflask.com" target="_blank">
        <i class="home icon"></i>
        HelloFlask.com
    </a>
    <a class="item" href="https://github.com/greyli/catchat" target="_blank">
        <i class="github icon"></i>
        GitHub
    </a>
    {% if current_user.is_authenticated %}
        <a class="item" href="{{ url_for('chat.profile') }}">
            <i class="setting icon"></i>
            Profile
        </a>
    {% endif %}
    <a class="item" id="show-help-modal">
        <i class="help icon"></i>
        Help
    </a>
    {% if current_user.is_authenticated %}
        <a class="item" href="{{ url_for('auth.logout') }}">
            <i class="power off icon"></i>
            Sign out</a>
    {% endif %}
</div>

{% block nav %}
    <div class="ui top fixed borderless menu">
        <a class="item catchat" href="{{ url_for('chat.home') }}">
            <img src="{{ url_for('static', filename='logo.png') }}">
            <span>CatChat</span>
        </a>
        <div class="item">
            <div class="ui label black basic" title="Online users">
                <i class="user icon"></i> <span id="user-count">0</span> / {{ user_amount }}
            </div>
        </div>
        <div class="right menu hide-on-mobile">
            {% if current_user.is_authenticated %}
                <div class="item">
                    <button class="ui button orange basic" id="show-snippet-modal">Create Snippets</button>
                </div>
            {% else %}
                <div class="item">
                    <a class="ui primary button" href="{{ url_for('auth.login') }}">
                        Sign in</a>
                </div>
            {% endif %}
            <a class="item" id="toggle-sidebar">
                <i class="sidebar icon"></i>
            </a>
        </div>
    </div>
{% endblock %}

<!-- Help Modal -->
<div class="ui modal small help">
    <div class="header">Markdown Help</div>
    <div class="content">
        <section class="modal--default__content" id="modal-body-region">
            <div>
                <div class="modal-content">
                    <table class="ui celled striped table">
                        <tbody>
                        <tr>
                            <td><strong>Bold</strong></td>
                            <td>**bold**</td>
                        </tr>
                        <tr>
                            <td><i>Italics</i></td>
                            <td>*italics*</td>
                        </tr>
                        <tr>
                            <td>Header</td>
                            <td># H1 ## H2 ### H3</td>
                        </tr>
                        <tr>
                            <td>
                                <li>item</li>
                            </td>
                            <td>* item</td>
                        </tr>
                        <tr>
                            <td>Blockquote</td>
                            <td>&gt; blockquote</td>
                        </tr>
                        <tr>
                            <td><a href="http://greyli.com" target="_blank">Link</a></td>
                            <td>[title](http://...)</td>
                        </tr>
                        <tr>
                            <td>Image</td>
                            <td>![alt](http://...)</td>
                        </tr>
                        <tr>
                            <td><code>code</code></td>
                            <td>`code`</td>
                        </tr>
                        <tr>
                            <td>
                                <div class="codehilite"><pre><span></span><span class="k">def</span> <span class="nf">hello</span><span
                                        class="p">():</span>
    <span class="k">return</span> <span class="s2">"Hello World"</span>
</pre>
                                </div>
                            </td>
                            <td style="line-height: 100%">```python <i style="color: rgba(0,0,0,0.5)">(shift+enter for
                                line
                                break)</i><br>def hello():<br>
                                &nbsp;&nbsp;&nbsp;&nbsp;return "Hello World"<br>```
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <br>
            </div>
        </section>
    </div>
    <div class="actions">
        <button class="ui button cancel">Close</button>
    </div>
</div>

<!-- Snippet Modal -->
<div class="ui modal small snippet">
    <div class="header">Create code or text snippets</div>
    <div class="content">
        <div class="ui form">
            <textarea id="snippet-textarea" rows="20"></textarea>
        </div>
    </div>
    <div class="actions">
        <button class="ui button cancel">Cancel</button>
        <button class="ui button blue approve" id="snippet-button">Create</button>
    </div>
</div>

<!-- Mobile message Modal -->
<div id="mobile-new-message-modal" class="ui modal small">
    <div class="content">
        <div class="ui form">
            <textarea id="mobile-message-textarea" rows="15"></textarea>
        </div>
    </div>
    <div class="actions">
        <button class="ui button cancel">Cancel</button>
        <button class="ui button orange approve" id="send-button">Send</button>
    </div>
</div>

{% block content %}{% endblock %}
{% block scripts %}
    <script src="{{ url_for('static', filename='js/jquery.min.js') }}"></script>
    <script src="{{ url_for('static', filename='semantic-ui/semantic.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/socket.io.min.js') }}"></script>
    <script src="{{ url_for('static', filename='js/forms.js') }}"></script>
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
    {{ moment.include_moment(local_js=url_for('static', filename='js/moment-with-locales.min.js')) }}
    <script type="text/javascript">
        var root_url = "{{ url_for('chat.home') }}";
        var messages_url = "{{ url_for('chat.get_messages') }}";
        var current_user_id = {{ current_user.id|default(0) }};
        var csrf_token = "{{ csrf_token() }}";
    </script>
{% endblock %}
</body>
</html>
